import { Input, Button, Row, Col, Tabs, Form, Divider } from 'antd'
import { extend } from 'umi-request'
import React, { useEffect, useState } from 'react'
import { useHistory, useModel } from 'umi'

import BasePage from '../base'
import { NotificationOutlined, SoundOutlined } from '@ant-design/icons'
import AuthRouter from '../components/AuthRouter'
export default function TranslatePage() {
  const { TextArea } = Input
  const { TabPane } = Tabs
  const history = useHistory()
  const { initialState } = useModel('@@initialState')

  const [text, setText] = useState('')
  const [dst, setDst] = useState('zh')
  const [result, setResult] = useState('')
  const request = extend({
    timeout: 2000,
    headers: {
      'Content-Type': 'application/json',
      // 'Accept': 'application/json',
      token: sessionStorage.getItem('token'),
    },
    params: {
      token: sessionStorage.getItem('token'), // 所有请求默认带上 token 参数
    },
    // errorHandler: function (error) {
    //     history.push('/500')
    // }
  })
  useEffect(() => {
    if (sessionStorage.getItem('isLogin') !== '1') {
      history.push('/403')
    }
  })

  function callback(key) {
    switch (key) {
      case '1':
        setDst('zh')
        break
      case '2':
        setDst('en')
        break
      case '3':
        setDst('jp')
        break
      case '4':
        setDst('kor')
        break
      case '5':
        setDst('fra')
        break
      case '6':
        setDst('ru')
        break
      case '7':
        setDst('de')
        break
    }
  }

  function translate() {
    let url =
      initialState.BACK_END_URL + 'translate?text=' + text + '&to=' + dst
    request
      .get(url)
      .then(function (response) {
        console.log(sessionStorage.getItem('token'))
        setResult(response['dst'])
      })
      .catch(function (error) {
        history.push('/500')
      })
  }

  return (
    <BasePage>
      <AuthRouter>
        <Col>
          <Row wrap={true} style={(innerHeight = 200)}>
            <Col span={12}>
              <Tabs defaultActiveKey="1">
                <TabPane tab="自动检测" key="1">
                  请输入需要翻译的单词或文本
                </TabPane>
                <TabPane tab="中文" key="2">
                  请输入需要翻译的中文文本
                </TabPane>

                <TabPane tab="英文" key="3">
                  Please enter the word or text to be translated
                </TabPane>
              </Tabs>
            </Col>

            <Col span={12}>
              <Tabs onChange={callback}>
                <TabPane tab="中文" key="1">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="英文" key="2">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="日语" key="3">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="韩语" key="4">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="法语" key="5">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="俄语" key="6">
                  请选择需要翻译语言，默认为中文
                </TabPane>
                <TabPane tab="德语" key="7">
                  请选择需要翻译语言，默认为中文
                </TabPane>
              </Tabs>
            </Col>
          </Row>

          <Row wrap={true} style={(innerHeight = 400)}>
            <Col span={12}>
              <TextArea
                value={text}
                onPressEnter={translate}
                onChange={(event) => {
                  setText(event.target.value)
                }}
                placeholder="按Ctrl+Enter执行翻译"
                autoSize={{ minRows: 12, maxRows: 30 }}
              />
            </Col>
            <Col span={12}>
              <TextArea
                value={result}
                placeholder=""
                autoSize={{ minRows: 12, maxRows: 30 }}
              />
            </Col>
          </Row>
        </Col>
      </AuthRouter>
    </BasePage>
  )
}
